<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>设置-个人信息</title>
     <link rel="icon" href="./img/favicon.ico">


	<link rel="stylesheet" type="text/css" th:href="@{/css/elementui.css}" />
    <link rel="stylesheet" type="text/css" href="./css/all.css" />
    <link rel="stylesheet" type="text/css" href="./css/pages-seckillOrder.css" />
</head>

<body>
<div id="app">
    <!-- 头部栏位 -->
    <!--页面顶部-->
<div id="nav-bottom">
	<!--顶部-->
	<div class="nav-top">
		<div class="top">
			<div class="py-container">
				<div class="shortcut">
					<ul class="fl">
						<li class="f-item">青橙欢迎您！</li>
						<li class="f-item">
								<span v-if="!loginInfo.username">
									请<a th:href="@{/loginUI}">登录</a>
								</span>
							<span v-if="loginInfo.username">
									{{loginInfo.username}}
									<a href="javascript:void(0)" @click="logout">退出登录</a>
								</span>
							<span>
									<a th:href="@{/registerUI}">免费注册</a>
								</span>
						</li>
					</ul>
					<div class="fr typelist">
						<ul class="types">
							<li class="f-item"><span><a href="javascript:void(0)" @click="openMyOrder">我的订单</a></span></li>
							
							<li class="f-item"><span><a href="javaScript:void(0)" @click="openCart()" >我的购物车</a></span></li>
							<li class="f-item"><span><a href="home.html" target="_blank">我的青橙</a></span></li>			
							<li class="f-item"><span>青橙会员</span></li>						
							<li class="f-item"><span>企业采购</span></li>						
							<li class="f-item"><span>关注青橙</span></li>
							<li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
							<li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>				
							<li class="f-item"><span>网站导航</span></li>
						</ul>
					</div>
					
				</div>
			</div>
		</div>

		<!--头部-->
		<div class="header">
			<div class="py-container">
				<div class="yui3-g Logo">
					<div class="yui3-u Left logoArea">
						<a class="logo-bd" title="青橙"  href="javascript:void(0)" th:href="@{/index}"></a>
					</div>
					<div class="yui3-u Rit searchArea">
						<div class="search">
							<form action="" class="sui-form form-inline">
								<!--searchAutoComplete-->
								<div class="input-append">
									<input type="text" id="autocomplete" class="input-error input-xxlarge" />
									<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
								</div>
							</form>
						</div>
					</div>
					
				</div>

			</div>
		</div>
	</div>
</div>

    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img  v-bind:src="loginInfo.headPic" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{loginInfo.username}}</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd><a href="javascript:void(0)" @click="openMyOrder">我的订单</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待付款</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待发货</a></dd>
							<dd><a href="javascript:void(0)" @click="openMyOrder">待收货</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="center-setting-info.html">个人信息</a></dd>
							<dd><a href="javascript:void(0)"th:href="@{/openAddress}"  :class="orderStatus == 2 ? 'list-active' : ''">地址管理</a></dd>
							<dd><a th:href="@{/centerSettingSafe}" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6">
                    <div class="body userAddress">
                        <div class="address-title">
                            <span class="title">地址管理</span>
                            <a @click="add"  class="sui-btn  btn-info add-new">添加新地址</a>
                            <span class="clearfix"></span>
                        </div>
                        <div class="address-detail">
							<!--表格组件-->
							<el-table
									:data="myAddress"
									border
									style="width: 100%">
								<el-table-column
										prop="contact"
										label="姓名"
										width="180">
								</el-table-column>
								<el-table-column
										prop="address"
										label="地址">
								</el-table-column>
								<el-table-column
										prop="phone"
										label="联系电话"
										width="130">
								</el-table-column>
								<el-table-column
										fixed="right"
										label="操作"
										width="180">
									<template slot-scope="scope">
										<el-button @click="deleteAddress(scope.row.id)" type="text" size="small" >删除</el-button>
										<el-button @click="edit(scope.row.id)" type="text" size="small" >编辑</el-button>
										<el-button  v-if="scope.row.isDefault == 1" type="text" size="small" style="color: black">默认地址</el-button>
										<el-button v-else @click="address(scope.row.id)" type="text" size="small" >设为默认地址</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="pageNum"
									:page-sizes="pageList"
									:page-size="pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="total">
							</el-pagination>
							<!--分页组件结束-->
                        </div>


						<!--新增或者修改对话框-->
						<el-dialog :title="form.id>0?'修改':'新增'" :visible.sync="dialogFormVisible">
							<el-form :model="form">
								<el-form-item label="收货人：" :label-width="formLabelWidth">
									<el-input v-model="form.contact" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="所在区域:" :label-width="formLabelWidth">
									<el-select v-model="shenValue" placeholder="省" @change="updateshen" style="width: 160px;">
										<el-option
												v-for="item in shen"
												:key="item.provinceid"
												:label="item.province"
												:value="item.province"
										></el-option>
									</el-select>
									<el-select v-model="shiValue" placeholder="市" @change="updateshi">
										<el-option v-for="item in shi" :key="item.cityid" :label="item.city" :value="item.city"></el-option>
									</el-select>
									<el-select v-model="quValue" placeholder="区" @change="updatequ" style="width: 160px;">
										<el-option v-for="item in qu" :key="item.areaid" :label="item.area" :value="item.area"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="详细地址：" :label-width="formLabelWidth">
									<el-input  v-model="form.address"></el-input>
								</el-form-item>
								<el-form-item label="联系电话：" :label-width="formLabelWidth">
									<el-input  v-model="form.phone"></el-input>
								</el-form-item>
								<el-form-item label="地址别名：" :label-width="formLabelWidth">
									<el-input  v-model="form.alias"></el-input>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisible = false">取 消</el-button>
								<el-button type="primary" @click="save">确 定</el-button>
							</div>
						</el-dialog>
						<!--新增或者修改对话框结束-->
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏位 -->
    <!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="Mod-service">
				<ul class="Mod-Service-list">
					<li class="grid-service-item intro  intro1">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro2">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro  intro3">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro4">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro intro5">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
				</ul>
			</div>
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>品优购E卡</li>
							<li>品优购通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="./img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</div>
</div>
<!--页面底部END-->
</div>
<script type="text/javascript" src="./js/all.js"></script>
<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./js/pages/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/interceptor.js}"></script>
<script th:src="@{/js/elementui.js}"></script>
<script>
	var vue = new Vue({
		el: '#app',
		data () {
			return {
				// 页号
				pageNum: 1,
				// 页大小
				pageSize: 10,
				// 总行数
				total: 0,
				pageList: [10, 50, 100, 200, 300, 400],
				//我的收获地址
				myAddress:[],
				// 登录对象
				loginInfo: {},
				// 登录令牌
				token: '',
				// 输入跳转页
				inputPage: '',
				// 订单状态
				orderStatus: 5,
				// 总页数
				totalPage: 1,
				//控制对话框的显示与隐藏
				dialogFormVisible: false,
				//要插入或者修改的对象
				form: {},
				formLabelWidth: '120px',
				shen: [],
				shenValue: '',
				shi: [],
				shiValue: '',
				qu: [],
				quValue: '',
				dizhi: [],
			}
		},
		methods: {
			//设为默认地址
			address(id){
				this.username = this.loginInfo.username
				axios.get(`/portal/updatetoAddress/${this.username}/${id}`).then(response => {
					//修改成功
					this.$message({
						type: 'success',
						message:response.data.message
					});
					this.getMyAddress()
				});

			},
			//表示新增或者修改后的保存
			save() {
				if(this.form.id){
					var dizii = ""
					this.dizhi.forEach(item => {
						dizii = dizii + item + " "
					})
					this.form.address = dizii + this.form.address
					//修改
					axios.put(`/portal/Updateaddresds/`,this.form).then(response => {
						//修改成功
						this.$message({
							type: 'success',
							message:response.data.message
						});
					});
					this.getMyAddress()
				}else{
					if(this.form.phone ==undefined){
						this.$message.error('手机号不能为空！！！');
						return ;
					}
					if (!(/^1[34578]\d{9}$/.test(this.form.phone))) {
						this.$message.error('手机号码格式不正确！！！');
						return ;
					}
					if (this.dizhi.length != 3) {
						// 提示信息
						this.$message({
							type: "info",
							message: "请选择地址"
						});
						this.getshen()
						return
					}
					var dizii = ""
					this.dizhi.forEach(item => {
						dizii = dizii + item + " "
					})
					this.form.address = dizii + this.form.address

					this.form.username=this.loginInfo.username

					// console.log(this.form.username)
					//新增
					axios.post(`/portal/add/`,this.form).then(response => {
						//添加成功
						this.$message({
							type: 'success',
							message:response.data.message
						});
					});
					this.getMyAddress()
				}
				this.dialogFormVisible= false
			},
			//添加地址
			add(){
				this.dialogFormVisible = true;
				this.form={};
				this.dizhi = []
				this.shi = []
				this.shiValue = ''
				this.qu = []
				this.quValue = ''
				this.shenValue = ''
				// 获取省份信息
				this.getshen()
			},
			//编辑
			async edit(id) {
				this.dialogFormVisible = true;
				this.form={};
				this.dizhi = []
				this.shen= []
				this.shi = []
				this.shiValue = ''
				this.qu = []
				this.quValue = ''
				this.shenValue = ''

				//发送异步请求查询
				axios.get(`/portal/findByusername/${id}`).then(response => {
					this.form = response.data.data.tbAddress;
					this.dizhi = this.form.address.split(' ')
					this.shenValue = this.dizhi[0]
					this.shiValue = this.dizhi[1]
					this.quValue = this.dizhi[2]
					this.form.address = this.dizhi[this.dizhi.length - 1]
				});

				// 获取省份信息
				this.getshen()
			},
			getshen(){
				// 获取省份信息
				axios.get(`/portal/queryChenShi`).then(response => {
					this.shen = JSON.parse(response.data.data.provinces)
					// console.log(this.shen)
				})
			},
			// 省改变
			async updateshen (val) {
				this.shi = []
				this.shiValue = ''
				this.qu = []
				this.quValue = ''
				let obj = {};
				obj = this.shen.find((item) => {
					return item.province === val;
				});

				this.dizhi = []
				this.dizhi.push(val)
				// 获取市信息
				axios.get(`/portal/queryShiById/${obj.provinceid}`).then(response => {
					this.shi = JSON.parse(response.data.data.cities)
					// console.log(response.data.data)
				})
				// 市
				// this.shi = JSON.parse(res.data.cities)
			},
			// 市改变
			async updateshi (val) {
				this.qu = []
				this.quValue = ''
				let obj = {};
				obj = this.shi.find((item) => {
					return item.city === val;
				});
				if (this.dizhi.length >= 2) {
					this.dizhi.splice(this.dizhi.length - 1, this.dizhi.length)

				}

				this.dizhi.push(val)
				// 获取区信息
				axios.get(`/portal/queryByQuId/${obj.cityid}`).then(response => {
					this.qu = JSON.parse(response.data.data.areas)
					// console.log(response.data.data)
				})
				// 区
				// this.qu = JSON.parse(res.data.areas)
			},
			// 改变区
			updatequ (val) {
				if (this.dizhi.length === 3) {
					this.dizhi.splice(this.dizhi.length - 1, this.dizhi.length)
				}
				this.dizhi.push(val)
			},
			//删除地址
			deleteAddress(id){
				console.log(id)
				this.$confirm('将永久删除此地址, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击确定删除
					axios.delete(`/portal/deleteAddress/${id}`).then(response => {
						this.$message({
							type: 'success',
							message: response.data.message
						});
					})
					this.getMyAddress()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
				return
			},
			// 打开我的购物车
			openCart(){
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆, 为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '是',
						cancelButtonText: '否',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				window.location.href='/portal/cartUI'
			},
			//获取我的地址
			getMyAddress(){
				axios.get(`/portal/queryAddressByUsername/${this.loginInfo.username}/${this.pageNum}/${this.pageSize}`).then(response => {
					this.$set(this.myAddress = response.data.data.pageUtils.rows);
					this.$set(this.total = response.data.data.pageUtils.total);
				})

			},
			//页大小改变
			handleSizeChange(val) {
				this.pageSize = val;
				this.getMyAddress();//重新查询
			},
			//页号改变
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getMyAddress();//重新查询
			},
			// 从Cookie中获取用户信息
			showInfo() {
				var user = Cookies.get('qingcheng_user')
				// 把字符串转换json对象
				if (user) {
					this.loginInfo = JSON.parse(user)
				}
			},
			logout () {
				// 清空cookie值
				Cookies.set('qingcheng_token', '', {domain: 'localhost'})
				Cookies.set('qingcheng_user', '', {domain: 'localhost'})
				// 回到首页面
				window.location.href='/portal/index'
			},
			//打开我的账户
			openMyHome(){
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				//跳转页面
				window.location.href='/portal/myHome'
			},
			// 打开我的订单
			openMyOrder () {
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				window.location.href='/portal/myOrder'
			},
		},
		created () {
			this.showInfo()
			this.getMyAddress()
			this.getshen()
		}
	})
</script>





</body>

</html>